/*
 * @Author: humengchuan 531537052@qq.com
 * @Date: 2024-10-22 11:24:27
 * @LastEditors: humengchuan 531537052@qq.com
 * @LastEditTime: 2024-12-17 10:04:26
 * @FilePath: \projecte:\学习\react\react-optimize-ts\src\views\home\leftMenu\menuItem.tsx
 * @Description: 
 */
import React, { useState } from 'react'
import {
    UploadOutlined,
    UserOutlined,
    StockOutlined,
    VideoCameraOutlined,
} from '@ant-design/icons';
import { Menu } from 'antd';
import { useNavigate } from 'react-router-dom';

export default function menuItem() {
    const Navigate = useNavigate()
    type MenuItem = {
        key: string,
        icon?: React.ReactNode,
        label: React.ReactNode,
        path?: string,
        children?: MenuItem[]
    }
    // type MenuItem = Required<MenuProps>['items'][number];
    const items: MenuItem[] = [
        {
            key: '/',
            icon: <UserOutlined />,
            label: '首页',
            path: '/',
        },
        {
            key: '/forum',
            icon: <StockOutlined />,
            label: '论坛',
            path: '/forum',
        },
        {
            key: '/user',
            icon: <VideoCameraOutlined />,
            label: '用户',
            path: '/user',
            children: [
                {
                    key: '/user/list',
                    icon: <UploadOutlined />,
                    label: '用户列表',
                    path: '/user',

                },
                {
                    key: '/user/list2',
                    icon: <UploadOutlined />,
                    label: '用户管理',
                    path: '/user/list2',
                },
            ]
        },
        {
            key: '3',
            icon: <UploadOutlined />,
            label: 'nav 3',
            path: '/about',
        },
        {
            key: '4',
            icon: <StockOutlined />,
            label: 'graphql',
            path: '/graph',
        },
        {
            key: '5',
            icon: <StockOutlined />,
            label: 'BOARD',
            path: '/board',
        },
    ]
    const handleMenuItem = (e: any) => {
        // 获取自定义path  e.item.props.path
        let routerLink = e.item.props.path
        // console.log('handleMenuItem', e, e.item.props)
        Navigate(routerLink)

    }
    // const renderMenus = (items: MenuItem[]) => {
    //     return items.map((item) => {
    //         if (item.children) {
    //             return <Menu.SubMenu key={item.key} icon={item.icon} title={item.label} >
    //                 {renderMenus(item.children)}
    //             </Menu.SubMenu>
    //         }
    //         return <Menu.Item key={item.key} icon={item.icon}>
    //             {item.label}
    //         </Menu.Item>
    //     })
    // }
    return (
        <Menu
            theme="dark"
            mode="inline"
            defaultSelectedKeys={['1']}
            onClick={handleMenuItem}
            items={items}
        >
            {/* {renderMenus(items)} */}
            {/* {items.map((item) => {
                return <Menu.Item key={item.key} icon={item.icon}>
                    {item.label}
                </Menu.Item>
            })} */}
        </Menu>
    )
}
